<template>
  <div class="header-area">
    <div class="left-nav">
      <div class="logo">
        <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg">
      </div>
      <el-menu
          class="header-menu"
          mode="horizontal"
          :ellipsis=false
      >
        <el-menu-item @click="toHome" index="0">首页</el-menu-item>
        <el-menu-item @click="toBoard(board.boardId,board.boardName)" v-for="board in secondBoard"
                      :index="board.boardId" :key="board.boardId">
          {{ board.boardName }}
        </el-menu-item>
        <el-sub-menu :show-timeout="100" :hide-timeout="100" v-for="board in firstBoard" :index="board.boardId"
                     :key="board.boardId">
          <template #title>{{ board.boardName }}</template>
          <el-menu-item @click="toBoard(child.boardId,child.boardName)" v-for="child in board.children"
                        :index="child.boardId" :key="child.boardId">{{ child.boardName }}
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>

    <div class="right">
      <div class="search-input">
        <search-input></search-input>
      </div>
      <div class="header-userinfo">
        <el-button v-if="!Object.keys(userInfo).length"
                   @click="openLoginDialog"
                   class="el-btn login-btn"
                   type="primary"
                   plain>登录 / 注册
        </el-button>

        <el-dropdown v-if="Object.keys(userInfo).length" size="small">
          <div class="user-icon">
            <el-avatar :src="userInfo?.iconUrl || 'https://element-plus.org/images/element-plus-logo.svg'"
                       alt=""></el-avatar>
          </div>

          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人主页</el-dropdown-item>
              <el-dropdown-item>消息列表</el-dropdown-item>
              <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

    </div>
  </div>
</template>

<script setup>
import SearchInput from "@/views/components/header/SearchInput.vue";
import {onMounted} from "vue";
import {useAccountStore} from "@/store/accountStore.js";
import router from "@/router/router.js";
import {useUserStore} from "@/store/userStore.js";
import {storeToRefs} from "pinia";
import {useBoardStore} from "@/store/boardStore.js";
import {useArticleStore} from "@/store/articleStore.js";
import {ElMessage} from "element-plus";

const articleStore = useArticleStore();
const {userInfo} = storeToRefs(useUserStore());
const accountStore = useAccountStore();
const {showLoginDialog, showRegisterDialog} = storeToRefs(useAccountStore());
let {firstBoard, secondBoard} = storeToRefs(useBoardStore());
const openLoginDialog = function () {
  showLoginDialog.value = !showLoginDialog.value
}

const openRegisterDialog = () => {
  showRegisterDialog.value = !showRegisterDialog.value
}
/**
 * 处理退出登录
 */
const handleLogout = async () => {
  await accountStore.logout()
  ElMessage.success("退出登录")
}

const toHome = () => {
  articleStore.boardId = ""
  articleStore.articleList = []
  articleStore.getArticleList();
  router.push('/home')
}


/**
 * 获取板块数据
 * @param boardId
 * @param boardName
 */
const toBoard = (boardId, boardName) => {
  articleStore.boardId = boardId
  articleStore.articleList = []
  articleStore.getArticleList();
  router.push(`/board/${boardName}`)
}


onMounted(() => {
  useBoardStore().getBoardList()
})

</script>

<style scoped lang="scss">
@import "@/styles/var";

.header-area {
  width: $width-view-max;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10%;

  .left-nav {
    display: flex;
    align-items: center;
    position: relative;


    //:deep(.el-menu) {
    //  border-bottom: none;
    //  height: auto;
    //
    //  .el-menu-item {
    //    border: none;
    //
    //    &:hover {
    //      background-color: transparent;
    //    }
    //
    //    &.is-active:after {
    //      content: "";
    //      width: 1rem;
    //      height: 3px;
    //      background-color: $color-deep-theme;
    //      border-radius: 3px;
    //      position: absolute;
    //      top: 2rem;
    //    }
    //
    //    &.is-active {
    //      border-bottom: none;
    //      background-color: transparent;
    //    }
    //  }
    //}


    img {
      height: 20px;
      margin-right: 10px;
      object-fit: cover;
    }
  }
}

.right {
  display: flex;
  align-items: center;
  height: 100%;

  .header-userinfo {
    height: 2rem;

    .login-btn {
      margin-left: 20px;
    }

    .el-btn {
      height: 30px;
    }
  }

  .search-input {
    height: 30px;
    margin-right: 2rem;
  }
}

.user-icon {
  display: flex;
  align-items: center;
  outline: none;

  .user-nickName {
    display: flex;
    outline: none;
  }
}

</style>